<template>
  <div>
    <div class="params">
        <el-button type="primary" class="el-icon-plus" @click="openAdd()">添加</el-button>
    </div>
    <el-table :data="tableData" border highlight-current-row stripe style="width: 100%">
      <el-table-column prop="weight" label="权重"></el-table-column>
      <el-table-column prop="hotKeyword" label="关键词"></el-table-column>
      <el-table-column prop="colorVal" label="颜色"></el-table-column>
      <el-table-column prop="nick" label="操作">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteIt(scope.row.hotWordId)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogTitle" :modal-append-to-body="false" :visible.sync="isOpenDialog">
      <el-form>
        <el-form-item label="关键词:">
          <el-input v-model="submitMap.hotKeyword"></el-input>
        </el-form-item>
        <el-form-item label="权重:">
          <el-input v-model="submitMap.weight"></el-input>
        </el-form-item>
        <el-form-item label="字体颜色:">
            <el-radio-group v-model="submitMap.colorVal" @change="changeColor">
                <el-radio v-for="(color, index) in colorList" :key="index" :label="color" :value="color"><span :style="'color:'+ color">{{color}}</span></el-radio>
            </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isOpenDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitHotWord()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    ajax,
    getIndexHotSearchWord,
    setIndexHotSearchWord,
    deleteIndexHotSearchWord
  } from "../../data/service";
  import LazyImgUpload from "../../components/LazyImgUpload"

  export default {
    name: "constantList",
    components:{
      LazyImgUpload
    },
    data() {
      return {
        param: {
          pageUri: 'version'
        },
        tableData: [],
        isOpenDialog: false,
        hotWordId: '',
        submitMap: {
          
        },
        dialogTitle: '',
        colorList: ['#cf1642', '#629627', '#43cbd0', '#d09343', '#b354f6']
      }
    },
    created() {
      this.loadData();
    },
    mixins: [ajax],
    methods: {
      loadData() {
        this.doajax(getIndexHotSearchWord, {}, (resp) => {
          this.tableData = resp.data;
        })
      },
      deleteIt(id) {
        this.doajax(deleteIndexHotSearchWord, {"hotWordId": id}, (resp) => {
          this.success("删除成功");
          this.loadData();
        })
      },
      openAdd() {
        this.isOpenDialog = true;
        this.hotWordId = ''
        this.dialogTitle = '添加关键词'
        this.submitMap = {
          hotKeyword: '',
          weight: '',
          colorVal: ''
        };
      },

        edit(info){
            this.isOpenDialog = true;
            this.hotWordId = info.hotWordId
            this.dialogTitle = '修改关键词'
            let sbMap = {
                hotKeyword: info.hotKeyword,
                weight: info.weight,
                colorVal: info.colorVal
            }
            this.submitMap = sbMap
        },

        changeColor(val){
            this.$set(this.submitMap, 'colorVal', val)
            // console.info(this.submitMap)
        },

      submitHotWord() {
        let data = {
            hotWordId: this.hotWordId
        }
        for(let key in this.submitMap){
            if(this.submitMap[key]){
                if(key == 'colorVal'){
                    data[key] = encodeURIComponent(this.submitMap[key])
                }else{
                    data[key] = this.submitMap[key]
                }
            }
        }
        this.doajax(setIndexHotSearchWord, data, (resp) => {
            if(this.hotWordId){
                this.success("编辑成功");
            }else{
                this.success("添加成功");
            }
            this.loadData();
            this.isOpenDialog = false;
        })
      }

    }
  }
</script>

<style scoped>
 .uploadApk {
    display: inline-block;
    padding-right: 20px;
    z-index: 2;
  }

  .uploadApk >>> img {
    width: 92px!important;
    height: 32px!important;
  }



  .uploadBtn{position: relative; margin-left: -116px; z-index:1;}
</style>
